<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="<?php echo $host ?>/JS/Desktop/animation.js" type="text/javascript" language="javascript"></script>
        <script src="<?php echo $host ?>/JS/Desktop/builtin.js" type="text/javascript" language="javascript"></script>
        <script src="<?php echo $host ?>/JS/Desktop/jquery-2.1.0.min.js"></script>
        <script src="<?php echo $host ?>/JS/Desktop/bret.js"></script>
        <title>Windows Phone</title>
        <style>
            body {
                -ms-touch-action: none;
            }

            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
            }
        </style>
        <script>
            /**/
            var screenWidth = 1366;
            var screenHeight = 768;
            var ready = false;
            var particles = new Array();
            var anim, heart, camera;
            var lastWidth = 0;
            var lastHeight = 0;
            var canvasWidth = 0;
            var canvasHeight = 0;
            var objectList;
            var cameraPositions = [];
            var slideAnimations = [];
            var slideWidth = 1366;
            var slideIndex = 0;
            var bokehCircle = [];

            window.onerror = function(err, link, linenumber) {
                //(err + ' on ' + linenumber);
                //return true;
            }

            window.onload = function() {
                var bretId = window.location.href.split('/')[5];
                $.getJSON('/bret/ws/bret/' + bretId, function(data) {
                    console.log(data.data);
                    renderBret(data.data);
                })
            }


            var animation;
            function renderBret(dataText) {
                data = JSON.parse(dataText);
                var width = document.body.clientWidth;
                var height = document.body.clientHeight;
                if (width / screenWidth > height / screenHeight) {
                    canvasWidth = myCanvas.width = height / screenHeight * screenWidth;
                    canvasHeight = myCanvas.height = height;
                } else {
                    canvasWidth = myCanvas.width = width;
                    canvasHeight = myCanvas.height = width / screenWidth * screenHeight;
                }
                myCanvas.style.top = ~~((height - myCanvas.height) / 2) + "px";
                myCanvas.style.left = ~~((width - myCanvas.width) / 2) + "px";
                lastWidth = myCanvas.width;
                lastHeight = myCanvas.height;
                //heart = new HeartAnimation("myCanvas");
                anim = new Animation("myCanvas");

                var canvas = document.getElementById('myCanvas');

                objectList = new brObjectList();
                camera = new brCamera(new brPoint(0, 1)); //create a camera
                camera.accelerate.ax = 2000;
                camera.accelerate.ay = 2000;
                animation = new brAnimation("myCanvas", objectList, false);
                animation.setCamera(camera);
                animation.editable = false;
                animation.live = true;
                var background = new brBackground(new brPoint(), myCanvas.width, myCanvas.height, {backgroundColor: data.background.backgroundColor});
                animation.setBackground(background);
                for (i = 0; i < data.background.numberOfCircle; i++) {
                    var context = animation.getContext();
                    var x = parseInt(Math.random() * width * 10);
                    var y = parseInt(Math.random() * height);
                    var radius = parseInt(40 + Math.random() * 80) * myCanvas.width / screenWidth;
                    var point = new brPoint(x, y);
                    var vx = 0;
                    var vy = 0;
                    var speed = new brSpeed(vx, vy);
                    var ax = (parseInt(Math.random() * 1000) - 500) * myCanvas.width / screenWidth;
                    var ay = (parseInt(Math.random() * 1000) - 500) * myCanvas.height / screenHeight;
                    var accelerator = new brAccelerator(ax, ay);
                    var vmaxx = parseInt(Math.random() * 15) * myCanvas.width / screenWidth;
                    var vmaxy = parseInt(Math.random() * 15) * myCanvas.height / screenHeight;
                    var maxSpeed = new brSpeed(vmaxx, vmaxy);
                    var effects = [];
                    if (data.background.type == 'bokeh') {
                        effects.push('bokehEffect');
                    }
                    var circle = new brCircle(point, radius, speed, maxSpeed, accelerator, effects, {background: data.background.circleBackground, border: data.background.circleBorder, lineWidth: 3, position: 'fixed'});
                    circle.selectable = false; //for background
                    objectList.append(circle);
                    bokehCircle.push(circle);
                }

                //Create slides
                cameraPositions = data.cameraPositions;
                slideAnimation = data.slideAnimations;
                for (objectIndex = 0; objectIndex < count(data.elements); objectIndex++) {
                    var object;
                    var curObject = data.elements[objectIndex];
                    console.log(curObject);
                    switch (curObject.type) {
                        case "Text":
                            object = new brText(curObject.name, curObject.content, new brPoint(curObject.startPoint.x, curObject.startPoint.y), curObject.width, curObject.height, curObject.speed, curObject.maxSpeed, curObject.accelerator, curObject.effects, curObject.orgStyle);
                            break;
                        case "Image":
                            object = new brImage(new brPoint(curObject.startPoint.x, curObject.startPoint.y), curObject.image.src, curObject.width, curObject.height, curObject.speed, curObject.maxSpeed, curObject.accelerator, curObject.effects, curObject.style);
                            break;
                        case "Elipse":
                            object = new brElipse(new brPoint(curObject.startPoint.x, curObject.startPoint.y), curObject.width, curObject.height, curObject.speed, curObject.maxSpeed, curObject.accelerator, curObject.effects, curObject.style);
                            break;
                        case "Rectangle":
                            object = new brRectangle(new brPoint(curObject.startPoint.x, curObject.startPoint.y), curObject.width, curObject.height, curObject.speed, curObject.maxSpeed, curObject.accelerator, curObject.effects, curObject.style);
                            break;
                        default:
                            break215;
                    }
                    objectList.append(object);
                }
                var bretBoundary = new brBoundary('objBoundary', new brPoint(100, 100), 100, 100, true);
                bretBoundary.visible = false;
                animation.start();
                //physicParticles(anim);
            }
            window.onkeydown = function(e) {
                switch (e.keyCode) {
                    case 37:
                        //left
                        if (animation.editable === false)
                        {
                            if (camera.moving)
                                return;
                            if (currentCameraPos > 0) {
                                currentCameraPos--;
                                if (cameraPositions[currentCameraPos] !== undefined) {
                                    if (!animation.live) {
                                        $('ul.slides li.selected').removeClass('selected');
                                        $('ul.slides li').get(currentCameraPos).className = 'selected';
                                    }
                                    camera.move(cameraPositions[currentCameraPos], function() {
                                        if (slideAnimations[currentCameraPos] !== undefined) {
                                            eval(slideAnimations[currentCameraPos]);
                                        }
                                    });
                                }
                            }
                        }
                        //animation.camera.move(new brPoint(animation.camera.position.x - 100, animation.camera.endPosition.y));
                        break;
                    case 38:
                        //up
                        //animation.camera.move(new brPoint(animation.camera.position.x, animation.camera.position.y - 100));
                        break;
                    case 39:
                        //right
                        if (animation.editable === false)
                        {
                            if (camera.moving)
                                return;
                            if (currentCameraPos < cameraPositions.length) {
                                currentCameraPos++;
                                if (cameraPositions[currentCameraPos] !== undefined) {
                                    if (!animation.live) {
                                        $('ul.slides li.selected').removeClass('selected');
                                        $('ul.slides li').get(currentCameraPos).className = 'selected';
                                    }
                                    camera.move(cameraPositions[currentCameraPos], function() {
                                        if (slideAnimations[currentCameraPos] !== undefined) {
                                            eval(slideAnimations[currentCameraPos]);
                                        }
                                    });
                                }
                            }
                        }
                        break;
                    case 40:
                        //down
                        //animation.camera.move(new brPoint(animation.camera.position.x, animation.camera.position.y + 100));
                        break;
                }
            }

        </script>
    </head>
    <body style="padding: 0; background: #000">
        <canvas id="myCanvas" width="200" height="100" style="position: absolute;"></canvas>
    </body>
</html>